<template>
  <div class="ranklistIndex">
    <!-- 官方排行榜 -->

    <h3>官方排行榜</h3>
    <ch-ranklist />
    <!-- 全球媒体排行榜 -->
    <h3>全球媒体排行榜</h3>
    <ch-globalrank :Toplist="Toplist" :themeColor="themeColor" />
  </div>
</template>

<script>
import GlobalRank from "./components/globalrank";
import RankList from "./components/ranklist";
import { getToplist } from "@/api/index.js";
export default {
  name: "RankListIndex",
  components: {
    // OfficialRank
    "ch-globalrank": GlobalRank,
    "ch-ranklist": RankList
  },
  props: {},
  data() {
    return {
      Toplist: "", // 全球媒体排行榜
      officiallist: [], //
      list: []
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {},
  created() {
    this.getToplist();
  },
  mounted() {},
  methods: {
    async getToplist() {
      // 发送请求获取 排行榜
      const { data } = await getToplist();
      // 分割全球媒体排行榜
      this.Toplist = data.list.slice(4);
      // 分割官方排行榜
      this.officiallist = data.list.slice(0, 4);
    }
  }
};
</script>

<style scoped lang="scss">
.ranklistIndex {
  padding: 1.25rem 9.375rem;
  h3 {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0 0.625rem;
    margin-top: 1.25rem;
  }
  //   padding: 0 6.25rem;
  .officialrank-box {
    overflow: hidden;
    display: flex;
    margin-bottom: 2.5rem;
    .officialrank-item {
      width: 20%;
      box-sizing: border-box;
      // flex: 20%;
      padding: 0.9375rem 0.625rem;
      cursor: pointer;
      .official-item {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        //   padding: 0.625rem;
        span {
          display: block;
          text-align: center;
        }
        .tooltip {
          box-sizing: border-box;
          position: absolute;
          top: -3.125rem;
          left: 0;
          width: 100%;
          background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4));
          height: 1.875rem;
          z-index: 2;
          text-align: right;
          line-height: 1.875rem;
          color: #fff;
          padding: 0 0.625rem;
          transition: all 0.6s;
        }
        .image {
          position: relative;
          width: 100%;
          img {
            width: 100%;
          }
          .play {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 50%;
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            text-align: center;
            line-height: 3.125rem;
            font-size: 1.875rem;
            transition: all 0.6s;
            opacity: 0;

            .icon-icon_play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 1.25rem;
              color: rgb(232, 60, 60);
            }
          }
        }
      }
    }

    .official-item:hover .tooltip {
      top: 0;
    }
    .official-item:hover .image .play {
      opacity: 1;
    }
  }
}
</style>
